<template>
  <Content :style="{padding: '10px 30px',background:'#fff'}">
  <Row>
    <Col span="24" class="flex-inline">
      <span class="title">媒体类型:</span>
      <Tabs class="tagsList" v-model="currentMedia" @on-click="getCurrentMedia">
        <TabPane class="tagItem" v-for="(item,index) in queryTypeData.mediaTypeName"  :label="item" :name="item" :key="index" ></TabPane>
      </Tabs>
    </Col>
    <Col span="24" class="flex-inline">
      <span class="title">科技分类:</span>
      <Tabs class="tagsList" v-model="currentTag" @on-click="getCurrentTag">
        <TabPane class="tagItem" v-for="(item,index) in queryTypeData.tags"  :label="item" :name="item" :key="index" ></TabPane>
      </Tabs>
    </Col>
    <Col span="6" class="flex-inline" >
      <span class="title">区域选择:</span>
      <Select v-model="currentRegion" style="width: 150px;margin-top: 10px">
        <Option v-for="(item,index) in queryTypeData.regions" :value="item" :key="index">{{item}}</Option>
      </Select>
    </Col>
    <Col span="6" class="flex-inline" >
      <span class="title">高新区选择:</span>
      <Select v-model="currentHighTeches" style="width: 150px;margin-top: 10px">
        <Option v-for="(item,index) in queryTypeData.highTeches" :value="item.id" :key="index">{{item.highTechName}}</Option>
      </Select>
    </Col>
    <!--<Col span="24" class="flex-inline">-->
      <!--<span class="title">专题分类:</span>-->
      <!--<Tabs class="tagsList" v-model="currentTopic" @on-click="getCurrentTopic">-->
        <!--<TabPane class="tagItem" v-for="(item,index) in queryTypeData.topics"  :label="item" :name="item" :key="index"></TabPane>-->
      <!--</Tabs>-->
    <!--</Col>-->
  </Row>
    <Row style="margin-top: 20px">
      <Col span="24">
        <Form>
          <FormItem>
            <DatePicker type="date" :value="startTime" @on-change="startTimeChange" placeholder="开始时间" style="width: 200px"></DatePicker>
            -
            <DatePicker type="date" :value="endTime" @on-change="endTimeChange"  placeholder="结束时间" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem>
            <Input type="text" placeholder="请输入文章名称" v-model="searchTitle"  style="width: 300px"/>
          </FormItem>
          <FormItem>
              <Button type="primary" @click="getSearchData">搜索</Button>
              <Button  type="primary" @click="download(selectAllIds)"  style="margin-left: 8px">一键下载</Button>
          </FormItem>
        </Form>
      </Col>

    </Row>
    <Row>
      <Col span="24">
        <Table :loading="loading" size="large" :columns="columnList" :data="dataList" @on-select-all="selectedAll"></Table>
        <div style="float: right; margin: 10px">
          <Page :total="total" :current.sync="currentPage" :page-size="pageSize" show-total @on-change="changePage" show-elevator></Page>
        </div>
      </Col>
    </Row>
  </Content>
</template>

<script>
    export default {
        name: "DataSearchDownload",
      data(){
          return{
              loading:false,
            startTime:"2019-01-01",//设置默认开始时间 从2019-01-01开始查询
            endTime:"",//结束时间
            total:0,//数据总数量
            pageNum:0,//默认页码,从0开始
            currentPage:1, //当前页码
            pageSize:10,//每页显示的条数
            currentMedia:"",//当前选择的媒体类型,默认是全部，空字符搜索就是全部
            currentTag:"",//当前选择的科技分类,默认是全部，空字符搜索就是全部
            currentRegion:"",//当前选择的区域,默认是全部，空字符搜索就是全部
              currentHighTeches:"",//当前选择的高新区，默认是全部
            // currentTopic:"",//当前选择的媒体类型,默认是全部，空字符搜索就是全部
              searchTitle:"",
            queryTypeData:{},
            selectAllIds:[],
            columnList:[
              {
                type: 'selection',
                width: 60,
                align: 'center',
              },
              {
                title:'媒体类型',
                key:'mediaTypeName'
              },
              {
                title:'文章名称',
                key:'title',
                width:300,
                render:(h,params) =>{
                  return h('a',
                    {
                      attrs:{
                        // console.log(params)
                        href:params.row.url,
                        target:"_blank"
                      },
                    style:{
                  }
                    },params.row.title)
              }
              },{
                title:'发布时间',
                key:'publishDate'
              },{
                title:'来源',
                key:'source'
              },{
                title:'区域',
                key:'region',
                    render:(h,params) =>{
                        if(params.row.highTechName==null){
                            return h('span',params.row.region)
                        }else if (params.row.region=='') {
                            return h('span',params.row.highTechName)
                        }else
                        {
                            return h('span',params.row.region+","+params.row.highTechName)
                        }
                    }
              },{
                title:'科技分类',
                key:'tag'
              },
              // {
              //   title:'所属专题',
              //   key:'topic'
              // },
              {
                title:"下载",
                key:"action",
                width:100,
                align:"center",
                render:(h,params)=>{
                    return h("Button",{
                      props:{
                        type:"primary",
                        size:"small"
                      },
                      on:{
                        click:()=>{
                          // console.log(params)
                          this.download([params.row.id])
                        }
                      }
                    },"下载")
                }
              }
            ],
            dataList:[],

          }
      },
        mounted(){
            let date=new Date();
            let year=date.getFullYear();
            let month=date.getMonth()+1;
            let day=date.getDate();
            let hour=date.getHours();
            let minute=date.getMinutes();
            let second=date.getSeconds();
            this.endTime=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
        },
      methods:{
        //开始时间  默认2019-01-01,要不然数据量太大
        startTimeChange(e){
          this.startTime=e;
        },
        //结束时间  默认是当天
        endTimeChange(e){
          this.endTime=e;
        },
        getTypeData(){
          let url=this.$url.baseUrl+'/consulting-library/api/news/condition'
          this.$http.get(url).then(response =>{
            let result=response.data
            if (result.meta.success){
              // console.log(result.data)
              this.queryTypeData=result.data
              for (let i in this.queryTypeData){
                this.queryTypeData[i].unshift('全部')
              }
            }else {
              console.log("获取数据失败")
            }
          })
        },
        getCurrentMedia(name){
          // if(name=="全部"){name=""}
          this.currentMedia=name
        },
        getCurrentTag(name){
          // if(name=="全部"){name=""}
          this.currentTag=name
        },
        getCurrentRegion(name){
          // if(name=="全部"){name=""}
          this.currentRegion=name
        },
        getCurrentTopic(name){
          // if(name=="全部"){name=""}
          this.currentTopic=name
        },
          getCurrentHighTeches(name){
            this.currentHighTeches=name
          },
        //获取数据
        getSearchData(){
          let url=this.$url.baseUrl+'/consulting-library/api/news/query'
            if (this.loading) return; // 避免多次请求
            this.loading = true;
          this.$http.get(url,{
            params:{
              startTime:this.startTime,
              endTime:this.endTime,
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              mediaTypeName:(this.currentMedia=="全部"?"":this.currentMedia),
              tag:(this.currentTag=="全部"?"":this.currentTag),
              region:(this.currentRegion=="全部"?"":this.currentRegion),
              topic:(this.currentTopic=="全部"?"":this.currentTopic),
               htId:this.currentHighTeches,
                title:this.searchTitle
            }
          }).then(response =>{
            let result=response.data
            if (result.meta.success){
                this.loading=false
              // console.log(result.data)
              this.dataList=result.data.list
              this.total=result.data.total
            }
          })
        },
        changePage(index){
          this.pageNum=index
          this.getSearchData()
        },
        //下载功能传递的参数是数组类型 "ids":[]
        download(ids){
          let url=this.$url.baseUrl+"/consulting-library/api/news/export"
           this.$http({
             method:"POST",
             url:url,
             data:{
               "ids":ids
             },
             responseType:"blob",
               header:{
                   'content-type': "application/msword"
               }
        }).then(response =>{
               // console.log(response)
             let fileName=decodeURI(response.headers['content-disposition'].split(";")[1].split("filename=")[1])
               // console.log(fileName)
             let blob=response.data;
               let reader =new FileReader();
               reader.readAsDataURL(blob)
               reader.onload=function(e){
                 let a=document.createElement("a");
                 a.download =fileName;
                 a.href=e.target.result;
                 document.getElementsByTagName("body")[0].append(a);
                 a.click();
                 a.remove()
             }
           })
        },
        //得到全选状态下的ID
        selectedAll(selection){
          this.selectAllIds=[]
                // console.log(selection)
          for (let i in selection)
          this.selectAllIds.push(selection[i].id)
          // console.log(this.selectAllIds)

        }
      },
      watch:{
        currentMedia(){
          this.getCurrentMedia(this.currentMedia)
            this.pageNum=1
            this.currentPage=1
          this.getSearchData()
        },
        currentTag(){
          this.getCurrentTag(this.currentTag)
            this.pageNum=1
            this.currentPage=1
            this.getSearchData()
        },
        currentRegion(){
          this.getCurrentRegion(this.currentRegion)
            this.pageNum=1
            this.currentPage=1
          this.getSearchData()
        },
        currentTopic(){
          this.getCurrentTopic(this.currentTopic)
            this.pageNum=1
            this.currentPage=1
          this.getSearchData()
        },
          currentHighTeches(){
              this.getCurrentHighTeches(this.currentHighTeches)
              this.pageNum=1
              this.currentPage=1
              this.getSearchData()
          },
      },
      created(){
          this.getTypeData()
          this.getSearchData()
      }

    }
</script>

<style>
  .flex-inline{
    display: flex;
  }
  .title{
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
    margin-right: 10px;
  }
.tagsList{
  float: left;
}
.ivu-tabs-nav-scroll{
  width: 830px;
}
  .tagItem{
    padding: 0 10px;
    line-height: 40px;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    box-sizing: border-box;
    border: none;
    background: #ffffff;
    height: 40px;
    margin: 0px;
  }
  .tagsList .ivu-tabs-bar{
    margin-bottom: 0px;
    border:none;
  }
  .tagsList .ivu-tabs-content{
    display: none;
  }
  .ivu-form-item{
    display: inline-block;
    margin-right: 20px;
  }

</style>
